<template>
  <div>


    <el-row>
      <el-col :span="12">
        <el-input v-model="content" style="width: 200px" size="small" placeholder="请输入角色名/备注/创建人"></el-input>
        <el-button size="mini" style="margin-left: 10px" type="primary" @click="doquery()"><i
          class="iconfont icon-search"></i> 查询
        </el-button>
        <el-button size="mini" type="success" @click="toadd" v-has="'sys:role:add'"><i class="iconfont icon-add"></i> 添加</el-button>
        <el-button size="mini" type="danger"><i class="iconfont icon-delete"></i> 批量删除</el-button>
      </el-col>
      <el-col :span="12" style="display: flex;justify-content: flex-end;">
        <el-button-group>
          <el-tooltip effect="dark" v-has="'sys:user:export'" content="导出到excel" placement="top">
            <el-button size="mini" @click="exportexcel"><i class="iconfont icon-Excel"></i></el-button>
          </el-tooltip>
        </el-button-group>
      </el-col>
    </el-row>


    <el-table
      :data="roles"
      stripe
      style="width: 100%;" size="mini" @row-click="selectTableRow">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column sortable
                       prop="id"
                       label="ID"
                       width="60">
      </el-table-column>
      <el-table-column
        prop="name" sortable
        label="角色"
        width="100">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注" width="180">
      </el-table-column>
      <el-table-column
        prop="createBy"
        label="创建人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime" sortable
        label="创建时间" width="180">
      </el-table-column>

      <el-table-column
        label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="toEdit(scope.row)" type="warning" size="mini">编辑</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="currentPage"
      :page-sizes="[2,10, 20, 30, 40,100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog :title="title" :visible.sync="formVisiable" :close-on-click-modal="false" width="500px">
      <el-form :model="form" size="small">

        <el-form-item label="角色" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色备注" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.remark" type="text" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisiable = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <H3>角色菜单树</H3>
    <el-tree :props="treeProps"
             :data="menus"
             show-checkbox
             node-key="id"
             ref="tree"
             default-expand-all
             :expand-on-click-node="false">
      <div slot-scope="{ node, data }" style="display: flex;justify-content: flex-start">

        <template v-if="data.type == '0'">
          <div style="width:120px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="success" size="mini"> 目录</el-tag>

          </div>
        </template>
        <template v-else-if="data.type == '1'">
          <div style="width:100px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="warning" size="mini">菜单</el-tag>
          </div>
        </template>
        <template v-else>
          <div style="width:80px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="danger" size="mini">按钮</el-tag>
          </div>
        </template>

        <div style="width: 80px">
          <i :class="['iconfont',data.icon]"></i>
        </div>

        <div style="width: 100px">
         {{data.parentname}}
        </div>
        <div style="width: 100px">
          {{data.url}}
        </div>
        <div style="width: 100px">
          {{data.perms}}
        </div>
      </div>

    </el-tree>

    <div style="display: flex;margin-right: 50px;justify-content: flex-end">

      <el-button size="small">重置</el-button>
      <el-button size="small" type="primary" @click="submitrolemenu">提交</el-button>
    </div>

  </div>
</template>

<script>

  import axios from "axios"
  import qs from "qs"
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";

  export default {
    components: {ElButton},
    data() {
      return {
        menus: [],
        treeProps: {
          children: 'children',
          label: 'name'
        },
        //用户编辑窗口
        title: "",
        formVisiable: false,
        formLabelWidth: '100px',
        form: {},
        roles: [],
        content: "",
        currentPage: 1,
        total: 100,
        pageSize: 10,
        selectedroleid:0
      }
    },
    methods: {
      submitrolemenu(){
        var that = this;
        axios.post("/sys/role/updaterolemenus",qs.stringify({
          roleid:that.selectedroleid,
          menuids:that.$refs.tree.getCheckedKeys().join(",")+","+that.$refs.tree.getHalfCheckedKeys().join(",")
        })).then(res=>{
          that.$message({
            showClose: true,
            message: res.data.message,
          });
        })

      },
      exportexcel() {
        window.location.href = "/sys/role/export";
//        axios.get("/sys/user/export").then((res)=>{});
      },
      //选择表格行
      selectTableRow(row,column,event) {
        //查询出当钱角色对应的菜单ID
        var that = this
        this.selectedroleid = row.id
        axios.get("/sys/role/menuids/"+row.id).then(res=>{
//          that.$refs.tree.setCheckedKeys(res.data);
          that.$refs.tree.setCheckedKeys([20]);
        })
      },

      //添加
      save() {
        this.formVisiable = false;
        //提交到后台
        var that = this;

        var s = qs.stringify(this.form);
        axios.post("/sys/role", s).then(function (response) {
          var mes = response.data.message;
          if (response.data.code == '200') {
            that.$notify({
              title: '成功',
              message: mes,
              type: 'success'
            });
            that.page();
          } else {
            that.$notify.error({
              title: '错误',
              message: mes
            });
          }
        })

      },
      //新增
      toadd() {
        this.title = "新增角色";
        this.formVisiable = true;
        this.form = {};
      },

      //编辑
      toEdit(row) {
        this.title = "编辑角色";
        this.formVisiable = true;
        var data = this.copy(row);
        this.form = data;
      },
      copy(obj) {
        var newobj = {};
        for (var attr in obj) {
          newobj[attr] = obj[attr];
        }
        return newobj;
      },
      doquery() {
        this.currentPage = 1;
        this.page();
      }
      ,
      pageSizeChange(val) {
        this.pageSize = val;
        this.page();

      }
      ,
      pageChange(val) {
        this.currentPage = val;
        this.page();
      }
      ,
      page() {
        var that = this;
        axios.get("/sys/role/list", {
            params: {
              content: that.content,
              pageSize: that.pageSize,
              cpage: that.currentPage
            }
          }
        ).then(function (response) {
          that.roles = response.data.rows
          that.total = response.data.total
        })
      }
    },
    mounted() {
      this.page();
      //获取所有的菜单
      var that = this;
      axios.get("/sys/menu/all").then(res => {
        that.menus = res.data
      })

    }

  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
